<template>
  <view class="select-coupon">
    <NavBar title="优惠列表" />
    <view class="preferentialList">
      <view class="bd-content">
        <view
          class="content-item"
          v-for="(dItem, index) in discountList"
          :key="index"
          @click="handleSelect(dItem, index)"
        >
          <view class="flex-x-0-center discount-item">
            <view class="flex-y flex-1">
              <view class="discountName">{{ dItem.discountName }}</view>
              <view class="discountDesc">{{ dItem.discountDesc }}</view>
            </view>
            <view class="flex-x-0-center">
              <view class="price"
                >￥{{ dItem.discountFee | formatCurrency }}</view
              >
              <view class="circle" v-if="index !== selected"></view>
              <view class="img" v-else style="width: 37rpx; height: 37rpx">
                <xh-img
                  src="/wxapp/static/shop-mall/shopcart/cart_btn_selected.png"
                />
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="confirmBtn">
        <view
          class="flexCB"
          style="padding-bottom: env(safe-area-inset-bottom)"
        >
          <view class="confirmBtn-lf flexCS">
            <view class="_h1">共优惠:</view>
            <view class="_h2">
              ￥{{
                discountInfo && discountInfo.discountFee
                  ? discountInfo.discountFee / 100
                  : 0
              }}
            </view>
          </view>
          <button
            class="_button _h3"
            @click="handleConfirm"
            :style="{ background: themeColor }"
          >
            确定
          </button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getDiscount } from "@/service/api/sp-coupon/index";
import { mapState } from "vuex";
export default {
  data() {
    return {
      selected: null,
      discountInfo: null,
      discountList: [],
      type: null,
    };
  },
  computed: {
    ...mapState("sp-store/index", ["pubShopId"]),
    ...mapState("sp-common/base", ["themeColor"]),
  },
  mounted() {
    let { shopId, totalFee, selectItem, orderType, type } = JSON.parse(
      decodeURIComponent(this?.$Route?.query.par)
    );
    (this.shopId = shopId),
      (this.totalFee = totalFee * 100),
      (this.selectItem = selectItem||''),
      (this.orderType = orderType),
      (this.type = type);
    this.fetData();
  },
  methods: {
    handleSelect(item, index) {
      if (index === this.selected) {
        (this.selected = null), (this.discountInfo = null);
        return;
      }
      this.selected = index;
      this.discountInfo = item;
    },
    fetData() {
      let { shopId: pubDomainShopId, totalFee: payMoney } = this;
      let queryParams = {
        // 商品总金额，不用加上运费、打包费等费用
        payMoney,
        pubDomainShopId,
      };
      getDiscount(queryParams).then((res) => {
        let discountList = res;
        for (let i = 0; i < discountList.length; i++) {
          let discountInfo = discountList[i];
          if (this.selectItem.discountName == discountInfo.discountName) {
            (this.discountInfo = discountInfo),
              (this.selected = i),
              (this.discountList = discountList);
            return;
          }
        }
        (this.selected = null),
          (this.discountInfo = null),
          (this.discountList = discountList);
      });
    },
    handleConfirm() {
      const eventChannel = this.getOpenerEventChannel();
      if (eventChannel) {
        eventChannel.emit("acceptDataFromOpenedPage", {
          discountInfo: JSON.stringify(this.discountInfo),
        });
        this.$Router.back(0)
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.preferentialList {
  min-height: 100vh;
  width: 100%;
  background: #fff;
  padding-bottom: 150rpx;
}
/*content*/
.bd-content {
  margin-top: 20rpx;
  border-top: 1rpx solid #f6f6f6;
  /*可用优惠*/
  .content-item {
    .item-lf {
      width: 80%;
      height: 100%;
      .lf-top {
        ._h1 {
          font-size: 36rpx;
          font-family: SourceHanSansSC-Regular;
          font-weight: 400;
          color: rgba(255, 114, 0, 1);
        }
        ._h2 {
          margin-left: 40rpx;
          font-size: 34rpx;
          font-family: PingFangSC-Regular;
          font-weight: 400;
          color: rgba(56, 56, 56, 1);
        }
      }
      ._h3 {
        margin-top: 20rpx;
        line-height: 40rpx;
        font-size: 22rpx;
        font-family: SourceHanSansSC-Regular;
        font-weight: 400;
        color: rgba(163, 163, 163, 1);
      }
    }
    /*选中icon*/
    .item-rt {
      margin-left: 25rpx;
      position: relative;
      .icon-success {
        text-align: center;
      }
      ._h2 {
        width: 40rpx;
        height: 40rpx;
        border: 2rpx solid rgba(230, 230, 230, 1);
        border-radius: 50%;
      }
    }
  }
  /*不可用优惠*/
  .content-item-no {
    margin-top: 15rpx;
    padding: 30rpx;
    width: 90%;
    min-height: 143rpx;
    background: rgba(255, 255, 255, 1);
    box-shadow: -1rpx 2rpx 20rpx 0rpx rgba(204, 204, 204, 0.35);
    border-radius: 20rpx;
    height: 100%;
    .lf-top {
      ._h1 {
        font-size: 36rpx;
        font-family: SourceHanSansSC-Regular;
        font-weight: 400;
        color: rgba(110, 110, 110, 1);
      }
      ._h2 {
        margin-left: 40rpx;
        font-size: 34rpx;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: rgba(56, 56, 56, 1);
      }
    }
    ._h3 {
      margin-top: 20rpx;
      line-height: 40rpx;
      font-size: 22rpx;
      font-family: SourceHanSansSC-Regular;
      font-weight: 400;
      color: rgba(163, 163, 163, 1);
    }
    ._h5 {
      border-top: 1rpx solid #e4e4e4;
      margin-top: 30rpx;
      padding-top: 25rpx;
      font-size: 22rpx;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      color: rgba(163, 163, 163, 1);
    }
  }
}
/*底部确定anniu*/
.confirmBtn {
  position: fixed;
  bottom: 0;
  left: 0;
  padding: 20rpx 30rpx;
  width: calc(100% - 60rpx);
  background: rgba(255, 255, 255, 1);
  box-shadow: 0rpx -7rpx 12rpx 0rpx rgba(226, 226, 226, 0.3);
  .confirmBtn-lf {
    ._h1 {
      font-size: 30rpx;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      color: rgba(66, 66, 66, 1);
    }
    ._h2 {
      margin-left: 15rpx;
      font-size: 30rpx;
      font-family: SourceHanSansSC-Medium;
      font-weight: bold;
      color: rgba(255, 114, 0, 1);
    }
  }
  ._h3 {
    width: 250rpx;
    height: 80rpx;
    background: linear-gradient(
      140deg,
      rgba(34, 185, 101, 1),
      rgba(43, 210, 133, 1)
    );
    border-radius: 40rpx;
    font-size: 32rpx;
    font-family: SourceHanSansSC-Medium;
    font-weight: bold;
    color: rgba(255, 255, 255, 1);
    text-align: center;
    line-height: 80rpx;
    border: none !important;
    overflow: hidden;
  }
}

.content-item {
  padding: 0rpx 24rpx;
}
.discount-item {
  border-bottom: 1rpx solid #eeeeee;
  padding: 35rpx 0rpx;
  .circle {
    width: 37rpx;
    height: 37rpx;
    border: 2rpx solid #888888;
    border-radius: 50%;
  }
  .discountName {
    font-size: 32rpx;
    font-family: PingFang SC;
    font-weight: 400;
    color: #000000;
    line-height: 35rpx;
    margin-bottom: 14rpx;
  }
  .discountDesc {
    font-size: 27rpx;
    font-family: PingFang SC;
    font-weight: 400;
    color: #888888;
    line-height: 35rpx;
  }
  .price {
    font-size: 32rpx;
    font-family: Source Han Sans SC;
    font-weight: 400;
    color: #e64340;
    margin-right: 16rpx;
  }
}
.flex-x-0-center,
.flex-x-end {
  display: flex;
  flex-direction: row;
}
.flex-x-0-center {
  align-items: center;
}
.flex-1 {
  flex: 1;
}
.flex-y {
  display: flex;
  flex-direction: column;
}
.flexCA,
.flexCB {
  display: flex;
  align-items: center;
}
.flexCB {
  justify-content: space-between;
}
.flexCE,
.flexCS {
  display: flex;
  align-items: center;
}
.flexCS {
  justify-content: flex-start;
}
._button {
  margin: 0;
  padding: 0;
  color: #000;
  border-radius: 0;
  background: transparent;
  text-align: left;
  line-height: normal;
  overflow: visible;
}
</style>